<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>候选人状态管理 - BoLe智能HR系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            padding: 30px;
            background: #f8f9fa;
        }

        .stat-card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            text-align: center;
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-icon {
            font-size: 3em;
            margin-bottom: 15px;
        }

        .stat-number {
            font-size: 2.5em;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .stat-label {
            font-size: 1.1em;
            color: #666;
        }

        .confirmed .stat-icon { color: #22c55e; }
        .confirmed .stat-number { color: #22c55e; }

        .pending .stat-icon { color: #eab308; }
        .pending .stat-number { color: #eab308; }

        .rejected .stat-icon { color: #ef4444; }
        .rejected .stat-number { color: #ef4444; }

        .unknown .stat-icon { color: #6b7280; }
        .unknown .stat-number { color: #6b7280; }

        .controls {
            padding: 30px;
            background: white;
            border-bottom: 1px solid #e5e7eb;
        }

        .search-box {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }

        .search-input {
            flex: 1;
            padding: 15px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        .search-input:focus {
            outline: none;
            border-color: #667eea;
        }

        .btn {
            padding: 15px 25px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .status-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .status-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 25px;
            font-size: 14px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .status-confirmed {
            background: #22c55e;
            color: white;
        }

        .status-pending {
            background: #eab308;
            color: white;
        }

        .status-rejected {
            background: #ef4444;
            color: white;
        }

        .candidate-list {
            padding: 30px;
            background: white;
        }

        .candidate-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .candidate-item:hover {
            background: #f9fafb;
            border-color: #d1d5db;
        }

        .candidate-info {
            flex: 1;
        }

        .candidate-name {
            font-size: 1.2em;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .candidate-details {
            color: #6b7280;
            font-size: 0.9em;
        }

        .candidate-status {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .status-badge {
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.8em;
            font-weight: 600;
            color: white;
            min-width: 60px;
            text-align: center;
        }

        .loading {
            text-align: center;
            padding: 50px;
            color: #6b7280;
        }

        .loading .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #e5e7eb;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .message {
            padding: 15px;
            margin: 20px 0;
            border-radius: 10px;
            font-weight: 600;
        }

        .message.success {
            background: #dcfce7;
            color: #166534;
            border: 1px solid #bbf7d0;
        }

        .message.error {
            background: #fef2f2;
            color: #991b1b;
            border: 1px solid #fecaca;
        }

        @media (max-width: 768px) {
            .container {
                margin: 10px;
                border-radius: 15px;
            }

            .header {
                padding: 20px;
            }

            .header h1 {
                font-size: 2em;
            }

            .stats-grid {
                grid-template-columns: 1fr 1fr;
                padding: 20px;
            }

            .search-box {
                flex-direction: column;
            }

            .candidate-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .candidate-status {
                align-self: stretch;
                justify-content: space-between;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🤖 候选人状态管理</h1>
            <p>BoLe 智能HR系统 - 实时状态跟踪</p>
        </div>

        <div class="stats-grid" id="statsGrid">
            <div class="stat-card confirmed">
                <div class="stat-icon">🟢</div>
                <div class="stat-number" id="confirmedCount">-</div>
                <div class="stat-label">确认候选人</div>
            </div>

            <div class="stat-card pending">
                <div class="stat-icon">🟡</div>
                <div class="stat-number" id="pendingCount">-</div>
                <div class="stat-label">待定候选人</div>
            </div>

            <div class="stat-card rejected">
                <div class="stat-icon">🔴</div>
                <div class="stat-number" id="rejectedCount">-</div>
                <div class="stat-label">已拒绝候选人</div>
            </div>

            <div class="stat-card unknown">
                <div class="stat-icon">⚪</div>
                <div class="stat-number" id="unknownCount">-</div>
                <div class="stat-label">未评估候选人</div>
            </div>
        </div>

        <div class="controls">
            <div class="search-box">
                <input type="text" class="search-input" id="searchInput" placeholder="输入命令，如：'所有候选人列表' 或 '确认候选人12345678'">
                <button class="btn btn-primary" onclick="executeCommand()">执行命令</button>
            </div>

            <div class="status-buttons">
                <button class="status-btn status-confirmed" onclick="setQuickCommand('所有候选人列表')">📋 查看所有候选人</button>
                <button class="status-btn status-pending" onclick="setQuickCommand('筛选Python候选人')">🐍 Python候选人</button>
                <button class="status-btn status-rejected" onclick="setQuickCommand('筛选5年以上经验的候选人')">⭐ 经验候选人</button>
            </div>

            <div id="messageArea"></div>
        </div>

        <div class="candidate-list">
            <div class="loading" id="loadingArea">
                <div class="spinner"></div>
                <div>加载中...</div>
            </div>
            <div id="candidateList" style="display: none;"></div>
        </div>
    </div>

    <script>
        const API_BASE = '/api';
        let candidates = [];

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadStatusStats();
            loadAllCandidates();
        });

        // 加载状态统计
        async function loadStatusStats() {
            try {
                const response = await fetch(`${API_BASE}/candidates/status`);
                const data = await response.json();
                
                if (data.success) {
                    document.getElementById('confirmedCount').textContent = data.status_statistics.confirmed.count;
                    document.getElementById('pendingCount').textContent = data.status_statistics.pending.count;
                    document.getElementById('rejectedCount').textContent = data.status_statistics.rejected.count;
                    document.getElementById('unknownCount').textContent = data.status_statistics.unknown.count;
                }
            } catch (error) {
                console.error('加载状态统计失败:', error);
            }
        }

        // 加载所有候选人
        async function loadAllCandidates() {
            try {
                showLoading();
                const response = await fetch(`${API_BASE}/chat`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        message: '所有候选人列表',
                        user_id: 'web_user'
                    })
                });

                const data = await response.json();
                
                if (data.success && data.analyzed_candidates) {
                    candidates = data.analyzed_candidates;
                    displayCandidates(candidates);
                    showMessage(`成功加载 ${candidates.length} 位候选人`, 'success');
                } else {
                    showMessage('加载候选人列表失败: ' + (data.error || '未知错误'), 'error');
                }
            } catch (error) {
                console.error('加载候选人失败:', error);
                showMessage('加载候选人列表失败: ' + error.message, 'error');
            } finally {
                hideLoading();
            }
        }

        // 执行命令
        async function executeCommand() {
            const command = document.getElementById('searchInput').value.trim();
            if (!command) {
                showMessage('请输入命令', 'error');
                return;
            }

            try {
                console.log('🔍 发送命令:', command); // 调试日志
                showLoading();
                
                const requestData = {
                    message: command,
                    user_id: 'web_user'
                };
                console.log('📡 请求数据:', requestData); // 调试日志
                console.log('🌐 请求URL:', `${API_BASE}/chat`); // 调试日志
                
                const response = await fetch(`${API_BASE}/chat`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(requestData)
                });

                console.log('📥 响应状态:', response.status, response.statusText); // 调试日志
                
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }

                const data = await response.json();
                console.log('📊 响应数据:', data); // 调试日志
                
                if (data.success) {
                    showMessage(data.message || '命令执行成功', 'success');
                    
                    if (data.analyzed_candidates) {
                        candidates = data.analyzed_candidates;
                        displayCandidates(candidates);
                        console.log('✅ 显示候选人数量:', candidates.length);
                    }
                    
                    // 如果是状态更新，刷新统计
                    if (data.action_type === 'status_update') {
                        await loadStatusStats();
                    }
                } else {
                    console.warn('❌ 命令执行失败:', data);
                    showMessage('命令执行失败: ' + (data.error || '未知错误'), 'error');
                }
            } catch (error) {
                console.error('❌ 网络或解析错误:', error);
                showMessage('命令执行失败: ' + error.message, 'error');
            } finally {
                hideLoading();
                // 清空输入框
                document.getElementById('searchInput').value = '';
            }
        }

        // 设置快捷命令
        function setQuickCommand(command) {
            document.getElementById('searchInput').value = command;
        }

        // 显示候选人列表
        function displayCandidates(candidateList) {
            const listContainer = document.getElementById('candidateList');
            
            if (!candidateList || candidateList.length === 0) {
                listContainer.innerHTML = '<div style="text-align: center; padding: 50px; color: #6b7280;">暂无候选人数据</div>';
                listContainer.style.display = 'block';
                return;
            }

            const candidatesHtml = candidateList.map(candidate => {
                const statusColor = getStatusColor(candidate.status);
                const statusText = getStatusText(candidate.status);
                const skills = Array.isArray(candidate.skills) ? candidate.skills.slice(0, 3).join(', ') : '暂无技能信息';
                
                return `
                    <div class="candidate-item">
                        <div class="candidate-info">
                            <div class="candidate-name">${candidate.name || '未知姓名'}</div>
                            <div class="candidate-details">
                                ID: ${candidate.id} | 
                                经验: ${candidate.experience_years || 0}年 | 
                                技能: ${skills} | 
                                地点: ${candidate.location || '未知'}
                            </div>
                        </div>
                        <div class="candidate-status">
                            <div class="status-badge" style="background: ${statusColor}">${statusText}</div>
                            <div style="display: flex; gap: 5px;">
                                <button class="status-btn status-confirmed" onclick="updateCandidateStatus('${candidate.id}', '确认')">确认</button>
                                <button class="status-btn status-pending" onclick="updateCandidateStatus('${candidate.id}', '待定')">待定</button>
                                <button class="status-btn status-rejected" onclick="updateCandidateStatus('${candidate.id}', '拒绝')">拒绝</button>
                            </div>
                        </div>
                    </div>
                `;
            }).join('');

            listContainer.innerHTML = candidatesHtml;
            listContainer.style.display = 'block';
        }

        // 更新候选人状态
        async function updateCandidateStatus(candidateId, status) {
            try {
                const command = `${status}候选人${candidateId}`;
                const response = await fetch(`${API_BASE}/chat`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        message: command,
                        user_id: 'web_user'
                    })
                });

                const data = await response.json();
                
                if (data.success) {
                    showMessage(`候选人 ${candidateId} 状态已更新为：${status}`, 'success');
                    
                    // 更新本地候选人状态
                    const candidate = candidates.find(c => c.id === candidateId);
                    if (candidate) {
                        candidate.status = data.new_status;
                        candidate.status_color = data.status_color;
                    }
                    
                    // 重新显示候选人列表
                    displayCandidates(candidates);
                    
                    // 刷新统计
                    await loadStatusStats();
                } else {
                    showMessage('状态更新失败: ' + (data.error || '未知错误'), 'error');
                }
            } catch (error) {
                console.error('更新状态失败:', error);
                showMessage('状态更新失败: ' + error.message, 'error');
            }
        }

        // 获取状态颜色
        function getStatusColor(status) {
            const colors = {
                'confirmed': '#22c55e',
                'pending': '#eab308', 
                'rejected': '#ef4444',
                'unknown': '#6b7280'
            };
            return colors[status] || colors.unknown;
        }

        // 获取状态文本
        function getStatusText(status) {
            const texts = {
                'confirmed': '🟢 确认',
                'pending': '🟡 待定',
                'rejected': '🔴 拒绝',
                'unknown': '⚪ 未知'
            };
            return texts[status] || texts.unknown;
        }

        // 显示消息
        function showMessage(message, type = 'info') {
            const messageArea = document.getElementById('messageArea');
            messageArea.innerHTML = `<div class="message ${type}">${message}</div>`;
            
            // 3秒后自动清除消息
            setTimeout(() => {
                messageArea.innerHTML = '';
            }, 3000);
        }

        // 显示加载状态
        function showLoading() {
            document.getElementById('loadingArea').style.display = 'block';
            document.getElementById('candidateList').style.display = 'none';
        }

        // 隐藏加载状态
        function hideLoading() {
            document.getElementById('loadingArea').style.display = 'none';
        }

        // 回车键执行命令
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                executeCommand();
            }
        });
    </script>
</body>
</html>
